@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: auto;
  }
}

[class*="col-"]:not([class*="sticky-"]):not([class*="position-"]) {
  position: relative;
}

@include media-breakpoint-down(sm) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
    &.grid-2 {
      -webkit-column-count: 2;
      -moz-column-count: 2;
      column-count: 2;
    }
    > * {
      display: inline-block;
      width: 100%;
    }
  }
}

.form-group {
  margin-bottom: 1rem;
}

/*	Custom Bootstap Columns */
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .col#{$infix}-1-5 {
      flex: 0 0 auto;
      width: 20%;
    }
  }
}

#wrapper {
  position: relative;
  float: none;
  width: 100%;
  margin: 0 auto;
  background-color: var(--#{$prefix}body-bg);
  box-shadow: 0 0 10px rgba($black, 0.1);
  body:not(.stretched) & {
    @include media-breakpoint-up(xl) {
      max-width: map-get($grid-breakpoints, "xl");
    }
    @include media-breakpoint-up(xxl) {
      max-width: map-get($grid-breakpoints, "xxl");
    }
  }
  .stretched & {
    margin: 0;
    box-shadow: none;
  }
  #content {
    margin-top: 20px;
    margin-bottom: 20px;
    min-height: calc(100vh - 500px);
  }
}

/* ----------------------------------------------------------------
	Sections
-----------------------------------------------------------------*/

.section {
  --#{$prefix}section-margin: 0.5em;
  --#{$prefix}section-padding: 0.5em;
  --#{$prefix}section-bg: transparent;
  position: relative;
  width: 100%;
  margin: var(--#{$prefix}section-margin) 0;
  padding: var(--#{$prefix}section-padding) 0;
  background-color: var(--#{$prefix}section-bg);
  overflow: hidden;
  .container {
    position: relative;
    z-index: 2;
    + .video-wrap {
      z-index: 1;
    }
  }
}

.video-placeholder {
  background-size: cover !important;
  background-attachment: scroll !important;
  background-position: center center !important;
}

.revealer-image {
  position: relative;
  bottom: -100px;
  @include transition(bottom 0.3s ease-in-out);

  .section:hover & {
    bottom: -50px;
  }
}

/* ----------------------------------------------------------------
	Columns & Grids
-----------------------------------------------------------------*/

.postcontent,
.sidebar {
  position: relative;
}

@include media-breakpoint-up(lg) {
  .section {
    --#{$prefix}section-margin: 1.25em;
    --#{$prefix}section-padding: 1.25em;
  }
}
